<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用CSS3制作文字、图片倒影</title>
    <meta name="keywords" content="">
    <meta name="description" content="使用CSS3制作文字、图片倒影">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/base.css" rel="stylesheet">
    <link href="/css/m.css" rel="stylesheet">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/comm.js"></script>
    <!--[if lt IE 9]>
    <script src="/js/modernizr.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/js/ajax.js"></script>
</head>
<body>
<!--top begin-->
<header id="header">
    <div class="navbox">
        <h2 id="mnavh"><span class="navicon"></span></h2>
        <div class="logo"><a href="index.html">杨青青个人博客</a></div>
        <nav>
            <ul id="starlist">
                <li><a href="index.html" title="首页">网站首页</a></li>
                <li><a href="index1.html">个人博客日记</a></li>
                <li class="menu"><a href="index2.html">网站制作</a>
                    <ul class="sub">
                        <li><a href="index3.html">CSS3|Html5</a></li>
                        <li><a href="index4.html">网站建设</a></li>
                        <li><a href="index5.html">推荐工具</a></li>
                    </ul>
                    <span></span></li>
                <li><a href="index6.html">设计心得</a></li>
                <li><a href="index7.html">关于我</a></li>
                <li><a href="index8.html">时间轴</a></li>
                <li><a href="index9.html">博客导航</a></li>
                <li><a href="11.html">留言</a></li>
            </ul>
        </nav>
        <div class="searchico"></div>
    </div>
</header>
<div class="searchbox">
    <div class="search">
        <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
            <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);"
                   onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                   onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
            <input name="show" value="title" type="hidden">
            <input name="tempid" value="1" type="hidden">
            <input name="tbname" value="news" type="hidden">
            <input name="Submit" class="input_submit" value="搜索" type="submit">
        </form>
    </div>
    <div class="searchclose"></div>
</div>
<!--top end-->
<article>
    <!--lbox begin-->
    <div class="lbox">
        <div class="content_box whitebg">
            <h2 class="htitle"><span class="con_nav">您现在的位置是：<a href="index.html">首页</a>&nbsp;>&nbsp;<a
                    href="index2.html">网站制作</a>&nbsp;>&nbsp;<a href="index3.html">CSS3|Html5</a></span>CSS3|Html5</h2>
            <h1 class="con_tilte">使用CSS3制作文字、图片倒影</h1>
            <p class="bloginfo"><i class="avatar"><img
                    src="/picture/avatar.jpg"></i><span></span><span>2018-11-08</span><span>【CSS3|Html5】</span><span><script
                    src="/js/4_16_1.js"></script>人已围观</span></p>
            <p class="con_info"><b>简介</b>CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持，但这并不影响我们来学习这个属性的应用
            </p>
            <div class="con_text">
                <p>
                    CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持，但这并不影响我们来学习这个属性的应用。</p>
                <p>box-reflect语法：</p>
                <p>box-reflect：none | &lt;direction&gt; &lt;offset&gt;? &lt;mask-box-image&gt;?</p>
                <p>&nbsp; &nbsp; &lt;direction&gt; = above | below | left | right</p>
                <p>&nbsp; &nbsp; &lt;offset&gt; = &lt;length&gt; | &lt;percentage&gt;</p>
                <p>&nbsp; &nbsp; &lt;mask-box-image&gt; = none | &lt;url&gt; | &lt;linear-gradient&gt; | &lt;radial-gradient&gt;
                    | &lt;repeating-linear-gradient&gt; | &lt;repeating-radial-gradient&gt;</p>
                <p>&nbsp; &nbsp; 默认值：none</p>
                <p>&nbsp; &nbsp; 适用于：所有元素</p>
                <p>&nbsp; &nbsp; 继承性：无&nbsp;</p>
                <p>由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：</p>
                <p>-webkit-box-reflect：none | &lt;direction&gt; &lt;offset&gt;? &lt;mask-box-image&gt;?</p>
                <p>box-reflect：none | &lt;direction&gt; &lt;offset&gt;? &lt;mask-box-image&gt;?</p>
                <p>取值：</p>
                <p>&nbsp; &nbsp; none：无倒影</p>
                <p>&nbsp; &nbsp; &lt;direction&gt;　Demo: 简单图片倒影 See with Webkit</p>
                <p>&nbsp; &nbsp; above：指定倒影在对象的上边</p>
                <p>&nbsp; &nbsp; below：指定倒影在对象的下边</p>
                <p>&nbsp; &nbsp; left：指定倒影在对象的左边</p>
                <p>&nbsp; &nbsp; right：指定倒影在对象的右边</p>
                <p>&nbsp; &nbsp; &lt;offset&gt;　Demo: 图片与倒影间隔 See with Webkit</p>
                <p>&nbsp; &nbsp; &lt;length&gt;：用长度值来定义倒影与对象之间的间隔。可以为负值</p>
                <p>&nbsp; &nbsp; &lt;percentage&gt;：用百分比来定义倒影与对象之间的间隔。可以为负值</p>
                <p>&nbsp; &nbsp; &lt;mask-box-image&gt;　Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit</p>
                <p>&nbsp; &nbsp; none：无遮罩图像</p>
                <p>&nbsp; &nbsp; &lt;url&gt;：使用绝对或相对地址指定遮罩图像。</p>
                <p>&nbsp; &nbsp; &lt;linear-gradient&gt;：使用线性渐变创建遮罩图像。</p>
                <p>&nbsp; &nbsp; &lt;radial-gradient&gt;：使用径向(放射性)渐变创建遮罩图像。</p>
                <p>&nbsp; &nbsp; &lt;repeating-linear-gradient&gt;：使用重复的线性渐变创建背遮罩像。</p>
                <p>&nbsp; &nbsp; &lt;repeating-radial-gradient&gt;：使用重复的径向(放射性)渐变创建遮罩图像。</p>
                <p><strong>图片倒影：</strong></p>
                <p>假设我们需要给一张图片做倒影效果，其结构其实非常简单：</p><img alt="使用CSS3制作图片倒影" height="200"
                                                       src="/picture/1cba05d9e0c7cfcfa897394b85f7e5f9.jpg" width="245">
                <p>根据前面的语法介绍，要让倒影在对象的右侧，我们只需要给box-reflect属性取值为right即可：</p>
                <p>.box-reflect img {</p>
                <ol>
                    <li title="">-webkit-box-reflect:&nbsp;right;</li>
                </ol>
                <p><font face="Consolas, Lucida Console, monospace">box-reflect:right;</font></p>
                <p>}</p>
                <p>效果如图：</p><img alt="使用CSS3制作图片倒影" height="200" src="/picture/1cba05d9e0c7cfcfa897394b85f7e5f9.jpg"
                                 width="245">
                <p>&lt;img src=&quot;图片.jpg&quot; alt=&quot;使用CSS3制作图片倒影&quot; style=&quot;-webkit-box-reflect:
                    right;box-reflect:right&quot;&gt;</p>
                <p><strong>文字倒影：</strong></p>
                <p>要让倒影在对象的下方，我们只需要给box-reflect属性取值为below即可：</p>
                <p>-webkit-box-reflect: below;</p>
                <p>box-reflect: below;</p>
                <p><strong>记录&middot;回忆</strong></p>
                <p>特别提示：在此示例中，我们没有为倒影提供了一个空白区，所以下面这一行就占据了位置，要解决这个问题，就得提供一个空白区域出来，使用margin：margin:20px 0;</p>
                <p><strong>记录&middot;回忆</strong></p>
                <p><strong>倒影与对象之间的间距：</strong></p>了解完生成倒影的方向之后，我们一起来看第二个属性值&lt;offset&gt;。有时候大家可能会有这样的需求，我虽然将倒影生成出来了，但我想让生成的倒影与对象(原图)之间有一定的间距。那么这个时候我们就需要使用到box-reflect属性中的第二个属性值&lt;offset&gt;。<br>随便拿一个示例来说做演示，假设对象生成的倒影在底部，而且需要让生成的倒影离自身有一个20px的间距，此时我们只需要这样做：
                <p>.box-reflect img {</p>
                <ol>
                    <li title="">-webkit-box-reflect:&nbsp;right 20px;</li>
                </ol>
                <p><font face="Consolas, Lucida Console, monospace">box-reflect:right 20px;</font></p>
                <p>}</p>
                <p>效果如图：</p><img alt="使用CSS3制作图片倒影" height="200" src="/picture/1cba05d9e0c7cfcfa897394b85f7e5f9.jpg"
                                 width="245">
                <p>&lt;img src=&quot;图片.jpg&quot; alt=&quot;使用CSS3制作图片倒影&quot; style=&quot;-webkit-box-reflect: right
                    20px;box-reflect:right 20px&quot;&gt;</p>
                <p><strong>给倒影添加遮罩效果:</strong></p>
                <p>左右倒影：</p>
                <p>&nbsp; &nbsp; -webkit-box-reflect: left 1px -webkit-gradient(linear, 0% 100%,100%
                    100%,from(rgba(255,255,255,0)), to(white));</p>
                <p>&nbsp; &nbsp; -webkit-box-reflect: right 1px -webkit-gradient(linear, 0% 100%,100% 100%,
                    from(rgba(255,255,255,0)), to(white));</p>
                <p>上下倒影：</p>
                <p>&nbsp; &nbsp; -webkit-box-reflect: above 1px -webkit-gradient(linear, 0% 100%,100% 100%,
                    from(rgba(255,255,255,0)), to(white));</p>
                <p>&nbsp; &nbsp;-webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 100%,100% 100%,
                    from(rgba(255,255,255,0)), to(white));</p>
                <p>字体倒影：</p>
                <p>&nbsp; &nbsp; -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent),
                    color-stop(.5, transparent), to(rgba(3,3,3,.2)));</p>
                <p>文字渐变+倒影：</p>
                <p>&nbsp; &nbsp; -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent),
                    color-stop(.5, transparent), to(rgba(3,3,3,.2)));</p>
                <p>&nbsp; &nbsp; background: -webkit-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1)
                    50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);</p>
                <p>&nbsp; &nbsp; -webkit-background-clip: text;-webkit-text-fill-color: transparent;</p>
                <p></p>
                <p>Tags：</p>
                <p class="share"><b>转载：</b>感谢您对杨青青个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源杨青个人博客”。<a
                        href="" target="_blank">/web/html/16.html</a></p>
                <p><span class="diggit"><a
                        href="JavaScript:makeRequest('/e/public/digg/?classid=4&id=16&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"> 很赞哦！ </a>(<b
                        id="diggnum"><script type="text/javascript" src="/js/4_16_5.js"></script></b>)</span></p>
                <div class="nextinfo">
                    <p>上一篇：<a href='15.html'>三步实现滚动条触动css动画效果</a></p>
                    <p>下一篇：<a href='17.html'>【分享】css3侧边栏导航不同方向划出效果</a></p>
                </div>
            </div>
        </div>
        <div class="whitebg">
            <h2 class="htitle">相关文章</h2>
            <ul class="otherlink">

                <li><a href="14.html" title="十条设计原则教你学会如何设计网页布局!" target="_blank">十条设计原则教你学会如何设计网页布局!</a></li>
                <li><a href="17.html" title="【分享】css3侧边栏导航不同方向划出效果" target="_blank">【分享】css3侧边栏导航不同方向划出效果</a></li>
                <li><a href="" title="使用CSS3制作文字、图片倒影" target="_blank">使用CSS3制作文字、图片倒影</a></li>
                <li><a href="15.html" title="三步实现滚动条触动css动画效果" target="_blank">三步实现滚动条触动css动画效果</a></li>
                <li><a href="13.html" title="别让这些闹心的套路，毁了你的网页设计" target="_blank">别让这些闹心的套路，毁了你的网页设计</a></li>

            </ul>
        </div>
        <div class="whitebg">
            <h2 class="htitle">随机图文</h2>
            <ul class="xiangsi">
                <li><a href="14.html" target="_blank"><i><img src="/picture/718b56be9dbf920cc0a6124545216654.jpg"></i>
                    <p>十条设计原则教你学会如何设计网页布局!</p>
                    <span>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局,很少用三列布局的.下面我来分享下我们常用的网页布局格式以及设计技巧</span></a>
                </li>
                <li><a href="17.html" target="_blank"><i><img src="/picture/0ce295f3c5f3c2d60e45e5715580aefa.jpg"></i>
                    <p>【分享】css3侧边栏导航不同方向划出效果</p>
                    <span>设定一组侧边栏导航菜单，然后可以从任何一边滑出。有两种实现方式，一种固定菜单，一种从左右两侧推出</span></a></li>
                <li><a href="13.html" target="_blank"><i><img src="/picture/393d21b65031dd0d85eb2e5789a97b1e.jpg"></i>
                    <p>别让这些闹心的套路，毁了你的网页设计</p>
                    <span>网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题</span></a></li>
                <li><a href="" target="_blank"><i><img src="/picture/1cba05d9e0c7cfcfa897394b85f7e5f9.jpg"></i>
                    <p>使用CSS3制作文字、图片倒影</p>
                    <span>CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持，但这并不影响我们来学习这个属性的应用</span></a>
                </li>

            </ul>
        </div>

        <div class="whitebg gbook">
            <h2 class="htitle">文章评论</h2>
            <ul>
                <script src="/js/4_16_20.js"></script>
                <script>
                    function CheckPl(obj) {
                        if (obj.saytext.value == "") {
                            alert("您没什么话要说吗？");
                            obj.saytext.focus();
                            return false;
                        }
                        return true;
                    }
                </script>
                <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl"
                      onsubmit="return CheckPl(document.saypl)">
                    <div id="plpost">
                        <p class="saying"><span><a href="4_16.html">共有<script type="text/javascript"
                                                                              src="/js/4_16_2.js"></script>条评论</a></span>来说两句吧...
                        </p>
                        <p class="yname"><span>用户名:</span>
                            <input name="username" type="text" class="inputText" id="username" value="" size="16">
                        </p>
                        <p class="yzm"><span>验证码:</span>
                            <input name="key" type="text" class="inputText" size="16">
                            <img src="/picture/pl.jpg" align="absmiddle" name="plKeyImg" id="plKeyImg"
                                 onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新"></p>
                        <input name="nomember" type="hidden" id="nomember" value="1" checked="checked">
                        <textarea name="saytext" rows="6" id="saytext"></textarea>
                        <input name="imageField" type="submit" value="提交">
                        <input name="id" type="hidden" id="id" value="16">
                        <input name="classid" type="hidden" id="classid" value="4">
                        <input name="enews" type="hidden" id="enews" value="AddPl">
                        <input name="repid" type="hidden" id="repid" value="0">
                        <input type="hidden" name="ecmsfrom" value="/web/html/16.html">

                    </div>
                </form>
            </ul>
        </div>
    </div>
    <!--lbox end-->
    <div class="rbox">
        <div class="whitebg paihang">
            <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale"><a href="14.html"><img
                    src="/picture/718b56be9dbf920cc0a6124545216654.jpg"><span>十条设计原则教你学会如何设计网页布局!</span></a></section>
            <ul>
                <li><i></i><a href="" title="使用CSS3制作文字、图片倒影" target="_blank">使用CSS3制作文字、图片倒影</a></li>
                <li><i></i><a href="17.html" title="【分享】css3侧边栏导航不同方向划出效果" target="_blank">【分享】css3侧边栏导航不同方向划出效果</a>
                </li>
                <li><i></i><a href="13.html" title="别让这些闹心的套路，毁了你的网页设计" target="_blank">别让这些闹心的套路，毁了你的网页设计</a></li>
                <li><i></i><a href="15.html" title="三步实现滚动条触动css动画效果" target="_blank">三步实现滚动条触动css动画效果</a></li>
            </ul>
        </div>
        <div class="whitebg tuijian">
            <h2 class="htitle">本站推荐</h2>
            <section class="topnews imgscale"><a href="14.html"><img
                    src="/picture/718b56be9dbf920cc0a6124545216654.jpg"><span>十条设计原则教你学会如何设计网页布局!</span></a></section>
            <ul>

                <li><a href="13.html" title="别让这些闹心的套路，毁了你的网页设计" target="_blank"><i><img
                        src="/picture/393d21b65031dd0d85eb2e5789a97b1e.jpg"></i>
                    <p>别让这些闹心的套路，毁了你的网页设计</p>
                </a></li>


            </ul>
        </div>
        <div class="ad whitebg imgscale">
            <ul>
                <a href='javascript:;' target="_blank"><img src='/picture/ad.jpg'></a></ul>
        </div>
        <div class="whitebg cloud">
            <h2 class="htitle">标签云</h2>
            <ul>
                <a href="E7BD91E7AB99_8.html" target="_blank">网站</a> <a href="E7A9BAE997B4_8.html"
                                                                        target="_blank">空间</a> <a
                    href="E88A82E697A5_8.html" target="_blank">节日</a> <a href="E58D9AE5AEA2_8.html"
                                                                         target="_blank">博客</a> <a
                    href="E7BD91E7AB99E588B6E4BD9C_8.html" target="_blank">网站制作</a> <a href="E998BFE9878CE4BA91_8.html"
                                                                                       target="_blank">阿里云</a> <a
                    href="E4B8AAE4BABA_8.html" target="_blank">个人</a> <a href="E58589E5B096E5AD90_8.html"
                                                                         target="_blank">光尖子</a> <a
                    href="E4B8AAE4BABAE58D9AE5AEA2_8.html" target="_blank">个人博客</a> <a href="E7A88BE5BA8FE59198_8.html"
                                                                                       target="_blank">程序员</a> <a
                    href="E6AF94E8B59B_8.html" target="_blank">比赛</a> <a href="E98791E7899BE4BA91E69C8D_8.html"
                                                                         target="_blank">金牛云服</a> <a
                    href="E799BEE5BAA6_8.html" target="_blank">百度</a> <a href="E8AEBEE8AEA1_8.html"
                                                                         target="_blank">设计</a> <a
                    href="E4BB8AE5A495E4BD95E5A495_8.html" target="_blank">今夕何夕</a></ul>
        </div>

        <div class="whitebg wenzi">
            <h2 class="htitle">猜你喜欢</h2>
            <ul>
                <li><a target="_blank" href="14.html">十条设计原则教你学会如何设计网页布局!</a></li>
                <li><a target="_blank" href="13.html">别让这些闹心的套路，毁了你的网页设计</a></li>
                <li><a target="_blank" href="15.html">三步实现滚动条触动css动画效果</a></li>
                <li><a target="_blank" href="">使用CSS3制作文字、图片倒影</a></li>
                <li><a target="_blank" href="17.html">【分享】css3侧边栏导航不同方向划出效果</a></li>
            </ul>
        </div>
        <div class="ad whitebg imgscale">
            <ul>
                <a href='javascript:;' target="_blank"><img src='/picture/ad02.jpg'></a></ul>
        </div>
        <div class="whitebg tongji">
            <h2 class="htitle">站点信息</h2>
            <ul>
                <li><b>建站时间</b>：2018-10-24</li>
                <li><b>网站程序</b>：帝国CMS7.5</li>
                <li><b>主题模板</b>：<a href="javascript:;" target="_blank">《今夕何夕》</a></li>
                <li><b>文章统计</b>：<a href="index8.html" target="_blank">31</a>篇文章</li>
                <li><b>标签管理</b>：<a href="tags.html" target="_blank">标签云</a></li>
                <li><b>统计数据</b>：<a href="index.html" target="_blank">百度统计</a></li>
                <li><b>微信公众号</b>：扫描二维码，关注我们</li>
                <li class="tongji_gzh"><a href='index.html' target="_blank"><img src='/picture/wxgzh.jpg'></a></li>
            </ul>
        </div>
    </div>
</article>
<footer>
    <div class="box">
        <div class="wxbox">
            <ul>
                <li><img src="/picture/wxgzh.jpg"><span>微信公众号</span></li>
                <li><img src="/picture/wx.png"><span>我的微信</span></li>
            </ul>
        </div>
        <div class="endnav">
            <p><b>站点声明：</b></p>
            <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
            <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="javascript:;" target="_blank">dacesmiling@qq.com</a>
            </p>
            <p>Copyright © <a href="javascript:;" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a
                    href="javascript:;" target="_blank">蜀ICP备11002373号-1</a></p>
        </div>
    </div>
    <a href="#">
        <div class="top"></div>
    </a></footer>
<script src="/js/donews_4_16.js"></script>
</body>
</html>
